<template>
  <div>
      <el-form ref="execSql" :model="execSql" label-width="230px" size="mini">
        <el-scrollbar style="height: 520px;">
          <div style="padding-right: 20px;">
          <el-form-item label="步骤名称" prop="name">
            <el-input v-model="execSql.name"></el-input>
          </el-form-item>
          <el-form-item label="数据源:" prop="connection">
            <el-popover
              ref="datasourceListPopover"
              placement="bottom-start"
              trigger="click"
              v-model="srcPopover">
              <table-tree  ref="tableTree"  @tableSelectHandler="tableSelectHandler"
                           @srcSelectHandler="srcSelectHandler"
                           style="height: 400px; overflow-y: auto"></table-tree>
            </el-popover>
            <el-input v-model="execSql.connection.name"  v-popover:datasourceListPopover :readonly="true" placeholder="点击选择数据源"></el-input>
          </el-form-item>
<!--            <el-form-item label="数据源url" prop="url">-->
<!--              <el-input type="text" :autosize="{ minRows: 1, maxRows: 10}" v-model="execSql.connection.url"></el-input>-->
<!--            </el-form-item>-->
          <el-form-item label="SQL语句" prop="sql">
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" v-model="execSql.sql"></el-input>
          </el-form-item>
<!--            <el-form-item label="用户名" prop="username">-->
<!--              <el-input type="text" :autosize="{ minRows: 1, maxRows: 10}" v-model="execSql.connection.username"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="密码" prop="password">-->
<!--              <el-input type="text" :autosize="{ minRows: 1, maxRows: 10}" v-model="execSql.connection.password" show-password></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="执行方式" prop="executeType">
              <el-select v-model="execSql.executeType" placeholder="请选择" style="width:100%">
                <el-option
                  :key="'before'"
                  :label="'before'"
                  :value="'before'">
                </el-option>
                <el-option
                  :key="'after'"
                  :label="'after'"
                  :value="'after'">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-scrollbar>
        <div class="el-dialog__footer">
          <span class="dialog-footer">
             <el-button
               icon="el-icon-back"
               @click="cancel">取消
             </el-button>
             <el-button
          type="primary" icon="el-icon-check"
          @click="handleSaveData()">确定
           </el-button>
          </span>
        </div>
      </el-form>
  </div>
</template>

<script>
import mxgraph from '../../../../../graph/VueMxGraphLoader'
import TableTree from './flink-table-tree.vue'

/* eslint-disable new-cap */
const {
  mxUtils,
  mxCodec
} = mxgraph
export default {
  name: 'execSql',
  components: {
    TableTree
  },
  props: {
    name: String
  },
  watch: {
    'execSql.executedEachInputRow': function (val, oldvlaue) {
      const flag = val === 'Y'
      this.executedEachInputRow = !flag
    },
    'execSql.setParams': function (val, oldvlaue) {
      const flag = val === 'Y'
      this.setParams = !flag
    }
  },
  data () {
    return {
      setParams: 'N',
      executedEachInputRow: 'N',
      graph: null,
      tempExecSql: null,
      srcPopover: false,
      execSql: {
        type: 'ExecSQL',
        name: '',
        connection: {
          id: '',
          name: '',
          url: '',
          type: '',
          username: '',
          password: ''
          // schema: ''
        },
        sql: '',
        executeType: ''
      },
      temp: {
        type: 'ExecSQL',
        name: '',
        connection: {
          id: '',
          name: '',
          url: '',
          type: '',
          username: '',
          password: ''
        },
        sql: '',
        executeType: ''
      }
    }
  },
  methods: {
    addObj () {
      if (!this.executedEachInputRow) {
        this.execSql.arguments.push({ name: '' })
      } else {
        this.$message({
          message: '执行每一行? 选中后可操作!',
          type: 'warning'
        })
      }
    },
    removeObj (index) {
      this.execSql.arguments.splice(index, 1)
    },
    // 回显数据
    loadData (data) {
      if (data) {
        this.$forceUpdate()
        this.execSql = Object.assign({}, data)
        this.tempExecSql = JSON.parse(JSON.stringify(data))
      }
    },
    setGraph (val) {
      this.graph = val
    },
    // 重置表单数据
    resetFormData (stepname) {
      this.$forceUpdate()
      this.$refs['execSql'].resetFields()
      this.execSql = JSON.parse(JSON.stringify(this.temp))
      this.execSql.name = stepname
    },
    saveTempPluginData (formData) {
      this.$emit('saveTempPluginData', formData)
    },
    getXml () {
      // this.saveTempPluginData(this.execSql)
      // const graph = this.graph
      // const enc = new mxCodec(mxUtils.createXmlDocument())
      // const node = enc.encode(graph.getModel())
      // const value = mxUtils.getPrettyXml(node)
      // return value
      this.saveTempPluginData(this.execSql)
      const graph = this.graph
      const enc = new mxCodec(mxUtils.createXmlDocument())
      const node = enc.encode(graph.getModel())
      // const value = mxUtils.getPrettyXml(node)
      let queryParJson = xmlToFlinkJSON.xmlToFlinkModels(node)
      queryParJson.models.model['step_name'] = this.execSql.name
      queryParJson.models.model['step_type'] = 'PREV'
      return queryParJson
    },
    /****
     * 数据源选中
     * @param data
     * @param node
     */
    srcSelectHandler (data, node) {
      let connection = {
        id: data.id,
        name: data.name,
        type: data.type
      }
      this.execSql.connection = connection
      // this.execSql.name = data.name + '(' + connection.name + ')'
      this.srcPopover = false
    },
    // 菜单树选中
    tableSelectHandler (data, node) {
      let connection = {
        id: node.parent.data.id,
        name: node.parent.data.name
      }
      this.execSql.connection = connection
      // this.execSql.name = data.name + '(' + connection.name + ')'
      this.srcPopover = false
    },
    // 保存表单数据
    handleSaveData () {
      if (this.execSql.name) {
        this.$emit('savePluginData', this.execSql)
      } else {
        this.$message({
          message: '步骤名称必填',
          type: 'warning'
        })
      }
    },
    // 重置数据
    cancel () {
      if (this.tempExecSql) {
        this.saveTempPluginData(this.tempExecSql)
      } else {
        let tempdata = JSON.parse(JSON.stringify(this.temp))
        tempdata['name'] = this.execSql.name
        this.saveTempPluginData(tempdata)
      }
      this.$emit('cancel')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-form-item {
  margin-bottom: 10px !important;
}
.el-tree {
  min-width: 400px;
  height: 211px;
  overflow-y: auto !important;
}
.el-main {
  padding: 5px;
}
.optionStyle button {
  margin: 0px
}

.button {
  width: 110px;
  height: 40px;
  display: inline-block;
  margin-left: 20px;
  text-align: center;
  font-size: 12px;
}
.el-checkbox__label {
  display: none !important
}
.el-dialog__header {
  text-align: left !important;
}
.el-dialog__footer {
  margin-top: 10px;
}
.el-tabs--border-card > .el-tabs__header{
  background-color: transparent;
}
</style>
